import React, { Component } from 'react'
import PubSub from "pubsub-js";
import axios from "axios";

export default class Search extends Component {

  // 2.受控组件获取表单数据
  /*
  state = {
    a:1,
    username:''
  }

  saveUsername = (event) => {
		this.setState({ username: event.target.value })
	}
   */

  searchInfo = ()=>{
    //1.获取表单输入(ref现用现取-非受控组件)
    //连续解构赋值+重命名[语法糖]
    const {input:{value:keyword}} = this 

    // 发起请求前通知List组件更新状态
    PubSub.publish('atguigu',{isFirst:false,isLoading:true})

    //发起ajax请求
    axios.get(`/api/search/users?q=${keyword}`).then(
      (response)=>{PubSub.publish('atguigu',{isLoading:false,userList:response.data.items,err:''})},
      (error)=>{PubSub.publish('atguigu',{isLoading:false,err:error.message})}
    )
  }
  
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索Github用户</h3>
        <div>
          <input ref={(c)=>{this.input=c}} type="text" placeholder="输入您搜索的名称"/>&nbsp;
          <button onClick={this.searchInfo}>搜索</button>
        </div>
      </section>
    )
  }
}
